<template>
  <v-app>
    <v-content>
      <v-carousel
    cycle
    hide-delimiter-background
    show-arrows-on-hover
    height="700px"
      >
    <v-carousel-item
      v-for="(slide, i) in slides"
      :key="i"
    >
      <v-sheet
        :color="colors[i]"
        height="100%"
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="display-3" v-html="slide">{{ slide }}</div>
          <br>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4'
      ],
      slides: [
        'Welcome to WheelChair',
        'username: admin password: password'
      ]
    }
  }
}
</script>
